<template>
  <el-dialog
    class="modify-class"
    width="500px"
    :title="title"
    visible
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
  <!-- popper-class="table-select-poppper" -->
  <el-form class="modify-form mt20" :model="formData" label-width="120px">
    <el-form-item label="系统/分系统">
      <el-cascader ref="cascaderRef" class="modify-select" filterable :options="sysList" :props="cascaderProps"
        v-model="formData.sysCode" style="width: 100%;"  @change="sysChangeHandle"/>
    </el-form-item>
    <el-form-item v-if=" type == deviceKey" label="单机" prop="deviceCode">
      <el-select v-model="formData.deviceCode" class="modify-select" popper-class="table-select-poppper" filterable style="width: 100%;" @change="deviceChangeHandle" >
        <el-option v-for="selectItem in deviceList" :key="selectItem.deviceCode" :value="selectItem.deviceCode" :label="selectItem.deviceName"/>
      </el-select>
    </el-form-item>
    <el-form-item label="变更项目" prop="changeProject">
      <el-input
        class="input"
        v-model="formData.changeProject"
        placeholder="请输入变更项目"
      />
    </el-form-item>
    <el-form-item label="变更描述" prop="changeDescribe">
      <el-input
        class="desc-input"
        type="textarea"
        v-model="formData.changeDescribe"
        :rows="4"
        placeholder="请输入变更描述"
      />
    </el-form-item>
    <el-form-item label="变更原因" prop="changeReason">
      <el-select v-model="formData.changeReason" class="modify-select" popper-class="table-select-poppper" filterable style="width: 100%;">
        <el-option v-for="selectItem in changeReasonList" :key="selectItem.value" :value="selectItem.value" :label="selectItem.label"/>
      </el-select>
    </el-form-item>
  </el-form>
  <div class="dialog-footer" slot="footer">
    <el-button class="btn-comfirm" type="primary" @click="saveHandle">确认</el-button>
    <el-button class="btn-cancel" @click="cancelHandle">取消</el-button>
  </div>
  </el-dialog>
</template>

<script>
import {changeReasonList} from '@/utils/const.js'
import overviewApis from '@/apis/overview/index.js'
import technology from '@/apis/overview/technology.js'

export default {
  props: {
    modelId: {
      type: [Number, String],
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    billType: {
      type: String,
      default: ''
    }
  },
  data() {
    this.changeReasonList = changeReasonList

    return {
      deviceKey: 'DEVICE',
      formData: {
        modelId: this.modelId,
        type: this.type,
        billType: this.billType,
        sysCode: '',
        sysName: '',
        sub: 0,
        deviceCode: '',
        deviceName: '',
        changeProject: '',
        changeDescribe: '',
        changeReason: ''
      },
      sysList: [],
      deviceList: [],
      cascaderProps: {
        children: 'subList',
        value: 'sysCode',
        label: 'sysName',
        checkStrictly: true
      }
    }
  },
  computed: {
    title() {
      return this.type == 'DEVICE' ? '单机技术变更新增' : '系统技术状态变更新增'
    }
  },
  methods: {
    close(refresh) {
      this.$emit("close", refresh);
    },
    beforeClose() {
      this.close(false);
    },
    saveHandle() {
      let formData = {...this.formData}
      formData.sysCode = formData.sysCode[0]
      technology.technologyInsert({...formData}).then(() => {
        this.$message.success('保存成功')
        this.close(true)
      })
    },
    cancelHandle() {
      this.close(false)
    },
    sysChangeHandle() {
      let {data, label} = this.$refs.cascaderRef.getCheckedNodes()[0]
      this.formData.sysName = label
      this.formData.sub = data.sub ? 1 : 0
      this.formData.deviceCode = ''
      this.formData.deviceName = ''
      if (this.type === this.deviceKey) {
        this.requestDevice({
          [data.sub ? 'sysSubCode' : 'sysCode']: data.sysCode
        })
      }
    },
    deviceChangeHandle(deviceCode) {
      let item = this.deviceList.find(item => item.deviceCode == deviceCode)
      this.formData.deviceName = item.deviceName
    },
    requestSystem() {
      overviewApis.sysList({modelId: this.modelId}).then(({data}) => {
        this.sysList = data
      })
    },
    requestDevice(params = {}) {
      this.deviceList = []
      overviewApis.deviceList({modelId: this.modelId, ...params}).then(({data}) => {
        this.deviceList = data
      })
    }
  },
  mounted(){
    this.requestSystem()
  }
}
</script>

<style>

</style>